<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui" 
	xmlns:pe="http://primefaces.org/ui/extensions"
	template="/WEB-INF/templates/template.xhtml">
	
	<ui:define name="headIncludes">		
		<f:event listener="#{condicaoPagamentoBean.initializeForm(param.condicaoId)}" type="preRenderView"/>
	</ui:define>

	<ui:define name="pageName">#{condicaoPagamentoBean.acao}</ui:define>
	
	<ui:define name="buttons">
		<p:commandButton value="Salvar" style="height:28px;" action="#{condicaoPagamentoBean.save}" update="@this, messageFormCondicao" icon="ui-icon-disk"/>
		<p:commandButton value="Voltar" style="height:28px;" action="#{condicaoPagamentoBean.changeToList}" immediate="true" icon="ui-icon-arrowreturnthick-1-w"/>
	</ui:define>		
	
	<ui:define name="content">	
		<p:panel>
			<div>
				<p:messages id="messageFormCondicao"/>
					<h:panelGrid columns="2" style="padding:5px;">
						<h:outputText value="Código" />
						<h:outputText value="Condição de pagamento *" />
						
						<p:inputText style="width:100px;" disabled="true" value="#{condicaoPagamentoBean.currentCondicao.id}" />
						<p:inputText  value="#{condicaoPagamentoBean.currentCondicao.condicaoPagamento}" style="width:300px;"
							required="true" requiredMessage="Informe a condição de pagamento." id="inputCondicao" maxlength="30">
							<p:ajax event="blur" />
						</p:inputText>
					</h:panelGrid>
				
					<h:panelGrid columns="2" style="padding:5px;" id="panelForma">
						<h:outputText value="Forma de pagamento *" />
						<h:outputText value="" />
						
						<p:autoComplete id="inputFormaPagamento" var="formaPagamento" value="#{condicaoPagamentoBean.currentCondicao.formaPagamento}" maxlength="30"
							itemLabel="#{formaPagamento.formaPagamento}" itemValue="#{formaPagamento}" size="50" required="true" requiredMessage="Selecione a forma de pagamento."
							converter="formaPagamentoConverter" completeMethod="#{condicaoPagamentoBean.getFormaPagamentoByQuery}">
							<p:ajax event="itemSelect" process="@this inputFormaPagamento"/>
						</p:autoComplete>
						<p:commandButton icon="ui-icon-search" style="height:24px;" actionListener="#{condicaoPagamentoBean.openDialogListFormaPagamento}" process="@this" title="Selecionar forma de pagamento"/>
					</h:panelGrid>
							
					<h:panelGrid columns="6" style="padding:5px;" id="panelParcelas">
						<h:outputText value="Número" />
						<h:outputText value="Dias" />
						<h:outputText value="Percentual (%)" />
						<h:outputText value="" />
						<h:outputText value="" />	
						<h:outputText value="" />				
						
						
						<p:inputText style="width:100px;" disabled="true" value="#{condicaoPagamentoBean.currentCondicao.qtdParcelas}"/>
						
						<p:inputText value="#{condicaoPagamentoBean.parcela.dia}"
							style="width:100px;" id="parcelaDia" maxlength="8"
							onkeypress="if (event.keyCode == 13) { event.preventDefault();  $('#btAddParcela').click(); }">
							<pe:keyFilter regEx="/[\d]/" />
						</p:inputText>
						
						<pe:inputNumber value="#{condicaoPagamentoBean.parcela.percentual}" 
							style="width:100px;" id="parcelaPercentual" maxValue="100" decimalPlaces="2" decimalSeparator=","
							onkeypress="if (event.keyCode == 13) { event.preventDefault();  $('#btAddParcela').click(); }" />
														
						<p:commandButton icon="ui-icon-plus" style="height:24px;" actionListener="#{condicaoPagamentoBean.addParcela}" update="messageFormCondicao" id="btAddParcela" title="Adicionar parcela"/>
						<p:commandButton style="height:24px;" actionListener="#{condicaoPagamentoBean.cleanListParcela}" value="Limpar" title="Limpar parcelas"/>
					</h:panelGrid>	
					
					<p:dataTable var="parcela" style="width:500px;padding-top:10px;"
						id="tableParcelas" value="#{condicaoPagamentoBean.currentCondicao.parcelas}"
						emptyMessage="Não há registros">  
				        <p:column headerText="Número" style="width:100px; text-align:center;"> 				         
				            <h:outputText value="#{parcela.numero}" />  
				        </p:column>  
				  
				        <p:column headerText="Dias" style="width:100px; text-align:center;">  
				            <h:outputText value="#{parcela.dia}"/>
				            <f:facet name="footer">
				            	<h:outputText value="Total" style="float:right;"/>
				            </f:facet>  
				        </p:column> 	
				        
				        <p:column headerText="Percentual" style="width:100px; text-align:center;">  
				            <h:outputText value="#{parcela.percentual}" >
				    			<f:convertNumber pattern="##0.00" />
				    		</h:outputText>  
				            <f:facet name="footer">
				            	<h:outputText value="#{condicaoPagamentoBean.currentCondicao.totalPercentual}">
				    				<f:convertNumber pattern="##0.00" />
				    			</h:outputText>   
				    			<h:outputText value="%"/>
				            </f:facet>
				        </p:column> 
			  		</p:dataTable>
				</div>
				<h:panelGrid columns="1" style="padding:5px;">
					<h:outputText value="* Campos obrigatórios" />
				</h:panelGrid>
		</p:panel>
	</ui:define>
	<ui:define name="popups">
		<ui:include src="listFormaPagamento.xhtml"/>
		<ui:include src="formFormaPagamento.xhtml"/>
	</ui:define>
</ui:composition>